<template>
  <div class="pt-12 bg-gray-50 dark:bg-gray-900 min-h-screen">
    <div class="w-screen flex justify-center flex-wrap ">
      <div class="max-w-sm rounded-lg bg-white shadow-md hover:shadow-lg transition-shadow duration-300 
            dark:bg-gray-800 dark:hover:shadow-gray-600/20 p-6">
        <!-- 标题部分 -->
        <div class="mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">开发日志</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">更新时间: 2025-05-28</p>
        </div>

        <!-- 分隔线 -->
        <hr class="border-t border-gray-200 dark:border-gray-700 mb-4">

        <!-- 内容文字 -->
        <div class="space-y-3">
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
            第三版blog，前端使用vue3+tailcss+gsap+elementplus，致力于简洁美观的前端页面开发。
          </p>

          <p class="text-gray-600 dark:text-gray-400 text-sm italic">
            “优秀的代码是艺术与工程的完美结合”
          </p>
        </div>

        <!-- 底部信息 -->
        <div class="mt-4 flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
          <span>查看详细内容</span>
        </div>
      </div>



      <!-- 主卡片容器 -->
      <div class="md:w-2/3 w-full m-2 bg-white rounded-xl shadow-sm hover:shadow-md 
                dark:bg-gray-800 dark:hover:shadow-xl dark:border-gray-600
                transition-all duration-300 border border-gray-200 
                group overflow-hidden">
        <el-collapse class="dark:[&_.el-collapse-item\_\_header]:bg-gray-800 
                          dark:[&_.el-collapse-item\_\_header]:text-gray-100
                          dark:[&_.el-collapse-item\_\_wrap]:bg-gray-700/50">
          <el-collapse-item v-for="item in artiles" :name="item.id" class="dark:border-b-gray-600">
            <template #title>
              <div class="p-3 flex items-center gap-2">
                <span class="text-xl text-red-500 dark:text-red-400">{{ item.date }}</span>
                <el-tag type="warning" class="dark:!bg-orange-700 dark:!border-orange-600 dark:!text-orange-100">
                  有更新
                </el-tag>
              </div>
            </template>

            <!-- 文章内容区 -->
            <div class="m-3 space-y-4" v-for="content in item.data">
              <article class="flex flex-col gap-3 p-4 border rounded-lg transition-colors
                      hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700/50
                      dark:text-gray-200">
                <div class="flex items-baseline gap-4">
                  <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ content.time }}</span>
                  <h3 class="text-xl font-semibold truncate">
                    {{ content.title }}
                  </h3>
                </div>

                <!-- 元信息 -->
                <div class="flex items-center gap-4 text-sm">
                  <div class="flex items-center gap-1.5 text-gray-500 dark:text-gray-300">
                    <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 20V10l-6 5.5L9 20zm0 0l6-5.5V20M9 4v6l-6-5.5L9 4zm0 0l6 5.5V4" />
                    </svg>
                    <!-- <span class="truncate">{{ content.author }}</span> -->
                    <span class="text-sm font-medium">| {{ content.info }}</span>
                  </div>
                </div>
              </article>
            </div>

          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useLoadingStore } from '../../ts/pinia';
const loadingStore = useLoadingStore()
onMounted(() => {
  loadingStore.hide()
})

import { useRouter } from 'vue-router';
let router = useRouter()
function navigateTo(id: string) {
  // router.push("/articles/content" + "?" + "id=" + id)
}
let artiles = ref([{
  id: '1',
  date: '2025-2',
  data: [{
    title: "重构第二版博客,v3.0立项",//标题
    info: "blogのv3.0版本，致力于简洁高效的博客系统。",
    author: "Cookies",
    time: "28号",
  }]
}, {
  id: '2',
  date: '2025-4',
  data: [{
    title: "前端主页面布局",//标题
    info: "重写了前端主页面布局。",
    author: "Cookies",
    time: "21号",
  }, {
    title: "first页面动画设计",//标题
    info: "为first页面设计了一个小动画...",
    author: "Cookies",
    time: "25号",
  }, {
    title: "页面切换组件",//标题
    info: "页面切换效果。",
    author: "Cookies",
    time: "27号",
  },]
}, {
  id: '3',
  date: '2025-5',
  data: [{
    title: "AI做的first页面",//标题
    info: "试用一下，看看效果，不尽人意",
    author: "Cookies",
    time: "4号",
  }, {
    title: "文章组件",//标题
    info: "简洁高效，双端适配",
    author: "Cookies",
    time: "10号",
  }, {
    title: "文章各组件黑暗模式",//标题
    info: "黑暗模式",
    author: "Cookies",
    time: "11号",
  }, {
    title: "动态组件",//标题
    info: "双端适配，黑暗模式",
    author: "Cookies",
    time: "25号",
  }, {
    title: "日志组件",//标题
    info: "记录开发日志",
    author: "Cookies",
    time: "28号",
  }]
},

])
</script>

<style scoped></style>